// 此文件运行在nodejs环境中,使用commonJS语法
// 此文件就是对当前项目的webpack进行增量配置
// 修改此文件一定要重启项目
// https://4x.ant.design/docs/react/use-with-create-react-app-cn#eject
// 官网:https://craco.js.org
// https://www.jianshu.com/p/5fd396e6e448
// yarn add -D @craco/craco
const path = require('path')
const cookbookMock = require('./mock/cookbook')
const categoryMock = require('./mock/category')
const userMock = require('./mock/user')

module.exports = {
  eslint: {
    enable: false
  },
  webpack: {
    alias: {
      // 将 @ 别名指向你的源代码目录
      '@': path.resolve('src')
    }
  },
  babel: {
    // 让当前的react工程支持js的装饰器
    // @babel/plugin-proposal-private-property-in-object 可装可不装
    // yarn add -D @babel/plugin-proposal-decorators@7
    plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      // yarn add -D  babel-plugin-import
      // antd-mobile组件库的按需引入,配置babel-plugin-import插件
      ['import', { libraryName: 'antd-mobile', style: 'css' }]
    ]
  },
  style: {
    postcss: {
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins: [
            [
              // yarn add -D postcss-pxtorem@6
              'postcss-pxtorem',
              {
                rootValue: 37.5, // 根元素字体大小
                unitPrecision: 6, // 小数点后保留的位数
                // 所有的属性中只要有px，都给转成rem，除style内联和Px或PX 以外
                propList: ['*']
              }
            ]
          ]
        }
      }
    }
  },
  devServer: {
    setupMiddlewares: (middlewares, { app }) => {
      cookbookMock(app)
      categoryMock(app)
      userMock(app)
      return middlewares
    },
    // proxy: {
    //   '/api': {
    //     target: 'https://api.iynn.cn/film',
    //     changeOrigin: true
    //     // pathRewrite: { '^/api': '' }
    //   }
    // }
  }
}
